<template>
  <!-- 柱状图组件 -->
  <div id="main" ref="barEchart" class="barEchart" />
</template>
<script>
// import * as echarts from 'echarts'
export default {
  name: 'Linechart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
    //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.barEchart)
      //   绘制图标
      myChart.setOption({
        grid: { // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            restore: {}, // 还原
            dataZoom: {}, // 区域缩放
            magicType: {
              type: ['bar', 'line']
            }//

          }
        },
        legend: {
          data: ['语文']
        },
        series: [
          {
            name: '语文',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            // 标记最大值 最小值
            markPoint: {
              data: [
                {
                  type: 'max', name: '最大值'
                }, {
                  type: 'min', name: '最小值'
                }
              ]
            },
            // 标注期间
            markArea: {
              data: [
                [
                  {
                    xAxis: '1月'
                  }, {
                    xAxis: '2月'
                  }
                ],
                [
                  {
                    xAxis: '6月'
                  }, {
                    xAxis: '7月'
                  }
                ]
              ]

            },
            // 平均值
            markLine: {
              data: [
                {
                  type: 'average', name: '平均值'
                }
              ],
              symbol: 'none' // 去掉虚线的箭头
            },
            //   平滑
            smooth: true,

            lineStyle: {
              color: 'green', // 设置线的颜色
              type: 'dashed' // 虚线  solid 实线 dotted 点线
            },

            areaStyle: { // 面积图
              color: 'pink'
            }

          }
        ]
      })
    }
  }
}
</script>

